<template>
     <div 
     style="background-color:#eae9e5;
     display: flex;
     justify-content: space-between;
     align-items: center;">
            <div 
            @click="reMySetup" 
            style="color:#c1ab96;
            padding: 20px 20px 20px 0;
            font-size:12px;
            font-size: 20px;"  
            span="9">
            <van-col 
                    style="color:#c2ad98;
                    padding: 5% 0px 5% 60%;
                    margin-left:3% ;"
                    span="9">
                    <van-icon name="arrow-left" size="20"/>
                </van-col>
            </div>
            <div 
            style="font-weight:1000;
            padding: 20px 20px 20px 20px"
             span="10">音效与通知</div>
            <div></div>
        </div>
        <div>
                <div 
                style="display:flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: #cab9a5 1px solid;
                padding:20px 0 20px 0;
                width: 90%;
                margin-left: 5%;
                ">
                    <div ><p
                    style="font-size:14px"
                    >系统内音效</p>
                    <p
                    style="font-size:12px;
                    color: grey;"
                    >如系统内刷新、新消息、点赞等音效</p>
                </div>
                <van-switch v-model="checked" size="20px" active-color="#c1ab96" inactive-color="#f1f0ed" />
                </div>
                <div 
                style="display:flex;
                justify-content: space-between;
                align-items: center;
                padding:20px 0 20px 0;
                border-bottom: #cab9a5 1px solid;
                width: 90%;
                margin-left: 5%;
                ">
                    <div ><p
                    style="font-size:14px"
                    >新消息提醒</p>
                    <p
                    style="font-size:12px;
                    color: grey;"
                    >关闭后，程序不运行时将无法收提醒</p>
                </div>
                <van-switch v-model="checked1" size="20px" active-color="#c1ab96" inactive-color="#f1f0ed" />
                </div>
                <div 
                style="display:flex;
                justify-content: space-between;
                align-items: center;
                padding:20px 0 20px 0;
                border-bottom: #cab9a5 1px solid;
                width: 90%;
                margin-left: 5%;
                ">
                    <div ><p
                    style="font-size:14px"
                    >应用内横幅提醒</p>
                    <p
                    style="font-size:12px;
                    color: grey;"
                    >关闭后，应用运行时的提醒将不会已横幅形式展现</p>
                </div>
                <van-switch v-model="checked2" size="20px" active-color="#c1ab96" inactive-color="#f1f0ed" />
                </div>
                <div 
                style="display:flex;
                justify-content: space-between;
                align-items: center;
                padding:20px 0 20px 0;
                border-bottom: #cab9a5 1px solid;
                width: 90%;
                margin-left: 5%;
                ">
                    <div ><p
                    style="font-size:14px"
                    >声音提醒</p>
                </div>
                <van-switch v-model="checked3" size="20px" active-color="#c1ab96" inactive-color="#f1f0ed" />
                </div>
                <div 
                style="display:flex;
                justify-content: space-between;
                align-items: center;
                padding:20px 0 20px 0;
                border-bottom: #cab9a5 1px solid;
                width: 90%;
                margin-left: 5%;
                ">
                    <div ><p
                    style="font-size:14px"
                    >震动提醒</p>
                </div>
                <van-switch v-model="checked4" size="20px" active-color="#c1ab96" inactive-color="#f1f0ed" />
                </div>
            </div>
</template>
<script lang="ts" setup>
    import { ref,createApp } from 'vue';
    import { CountDown } from 'vant';
    import {useRouter} from 'vue-router';
    const $router = useRouter();
    
    const checked = ref(true);
    const checked1 = ref(false);
    const checked2 = ref(true);
    const checked3 = ref(true);
    const checked4 = ref(true);
    
    //取消个人信息编辑
    function reMySetup(){
        $router.push({path:"setUp"})
        console.log(1111);
    } ;
</script>
<style scoped>


</style>>